<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>预约寄件</title>
    <!-- Bootstrap -->
    <link href="../bots/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <form action="">
    	<div class="div-bg">
	    	<table class="table ji_table table_1">
				<tr>
					<td class="col-xs-1">
						<table>
							<tr><td style="height:74px;"><img src="../bots/image/j.png" class=" center-block img-circle"  width="38" alt=""></td></tr>
							<tr><td style=""><img src="../bots/image/h.png" class=" center-block img-circle"  width="20" alt="" onClick="change()"></td></tr>
							<tr><td style="height:70px;"><img src="../bots/image/sj.png" class=" center-block img-circle" width="36" alt=""></td></tr>
						</table>
					</td>
					<td class="col-xs-11">
						<table class="table ji_table">
							<tr>
								<td style="padding:0px;border-top:0px;height:80px;">
									<textarea class="js" name="" id="j_info"  placeholder="点击添加寄件人" rows="2" style="border:1px;resize:none;" readonly></textarea>
								</td>
								<td class="dz" style="border-top:0px;">
									<span class="line"></span>
									<img src="../bots/image/ad.png" class="img-dz" alt=""><span class="dzb">地址簿</span>
								</td>
							</tr>
							<tr>
								<td style="padding:0px;height:80px;">
									<textarea class="js" name="" onClick="" id="s_info"  placeholder="点击添加收件人" style="border:0px;resize:none;"  rows="2" readonly></textarea>
								</td>
								<td class="dz">
									<span class="line"></span>
									<img src="../bots/image/ad.png" class="img-dz" alt="" ><span class="dzb">地址簿</span>
								</td>
								</tr>
						</table>
					</td>
				</tr>
	    	</table>
	    </div>
	    <!-- 寄件方式 -->
	    <div class="div-bg">

	    <table class="table ji_table table_2">
			<tr>
				<td class="td_l">选择快递</td>
				<td class="td_r">
					<a href="#" class="btn btn-primary btn-small disabled" role="button">随机快递</a>
					<a href="#" class="btn btn-default btn-small disabled" role="button">指定快递</a>
				</td>
			</tr>
			<tr>
				<td class="td_l">上门时间&nbsp;
					<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
				</td>
				<td class="td_r">请选择上门时间&nbsp;
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
			<tr id="goods" data-toggle="modal" data-target="#myModalgoods">
				<td class="td_l">物品&amp;重量</td>
				<td class="td_r"><!-- 请选择&nbsp; -->
				<input class="td_input" type="text" id="" name="" placeholder="请选择">
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
			<tr id="price" data-toggle="modal" data-target="#myModalprice">
				<td class="td_l">保价</td>
				<td class="td_r col-xs-8"><!-- 若价值超过500元建议保价&nbsp; -->
				<input class="td_input" type="text" id="" name="" placeholder="若价值超过500元建议保价">
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
			<tr name="ser" id="ser" data-toggle="modal" data-target="#myModalser">
				<td class="td_l">增值服务</td>
				<td class="td_r"><!-- 代收货款&nbsp; -->
					<input class="td_input" type="text" id="" name="" placeholder="代收货款">
					<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
				</td>
			</tr>
			<tr name="say" id="say" data-toggle="modal" data-target="#myModalsay">
				<td class="td_l" >对快递员说</td>
				<td class="td_r">
				    <input class="td_input" type="text" id="say_content" name="" value="" placeholder="有什么需要通知小哥的吗?">
				    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>

				</td>
			</tr>
	    </table>

	   </div>

	   <!-- 更多收件人 -->
	   <div class="div-bg">
	    <table class="table ji_table table_more">
		    <tr>
		    	<td style="border-top:0px;height:46px;text-align:center;color:#3B95FA;">
			    	<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;添加更多收件人
				</td>
			</tr>
	    </table>
	    </div>


	   

	   <!-- 协议 -->
	   <div class="div-hid">
	    </div>
	    <div class="div-bg bottom">
	    <table class="table ji_table table_3">
		    <tr>
		    	<td colspan="2" style="border-top:0px;background-color:#EEF6FF;">
		    	<div class="radio">
				  	<label>
			    		<input type="radio" name="" id="type_radio" class="type_radio" value="option2">&nbsp;
					    <span>我已同意并接受&nbsp;&nbsp;&nbsp;&nbsp;<a id="agm" data-toggle="modal" data-target="#myModalagm" href="#"><strong>《快递服务协议》</strong></a></span>
					</label>
				</div>
				</td>
			</tr>
			<tr>
		    	<td class="td_l">
		    		<p><span class="yf_l">预估运费:</span>&nbsp;<strong><span class="yf">&yen;--.--</span></strong>&nbsp;&nbsp;<span class="up glyphicon glyphicon-menu-up" aria-hidden="true"></span></p>
		    		<p><span class="sjfy">实际费用以快递小哥揽件核实为准</span></p>
				</td>
				<td class="sub"><input class="btn btn-default" type="submit" click="" value="提交"></td>
			</tr>
	    </table>
	    </div>
	
	</form>
<!-- 物品&重量 -->
	    <div class="modal" id="myModalgoods" style="display:none;top:60px;">
	    	<div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">选择物品类型和重量</h4>
	            </div>
	            <form action="" class="form-horizontal" role="form" id="" onsubmit="return check_form();">
	            <div class="modal-body">
			
						<table class="table ji_table" id="toXg">
						    <tr>
						    	<td>
						    		<label for="checkbox1">安全号码</label></td>
								<td>
									<input type="radio" id="" name="" value="">
								</td>
							</tr>
							<tr>
						    	<td colspan="2">
							    	<label>保护面单上收、寄件人电话隐私，可向快递员免费索取</label>
								</td>
			
							</tr>
							<tr>
						    	<td>
						    		<label for="">代收货款</label></td>
								<td>
									<input type="text" id="" name="" value="">
								</td>
							</tr>
							<tr>
						    	<td colspan="2">
							    	<label>快递员代商家向收货方收取货款的服务(最高支持1万)</label>
								</td>
			
							</tr>
							
					    </table>
	            </div>
	            <div class="modal-footer">
	                <button type="submit" class="btn btn-primary">确定</button>
	            </div>
	           </form>
	        </div>
	    </div>
        </div>
<!-- 物品&重量 end -->


<!-- 保价 -->
	    <div class="modal" id="myModalprice" style="display:none;top:60px;">
	    	<div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">物品保价</h4>
	            </div>
	            <form action="" class="form-horizontal" role="form" id="" onsubmit="return check_form();">
	            <div class="modal-body">
			
						<table class="table ji_table" id="toXg">
						    <tr>
						    	<td>
						    		<label for="checkbox1">安全号码</label></td>
								<td>
									<input type="radio" id="" name="" value="">
								</td>
							</tr>
							<tr>
						    	<td colspan="2">
							    	<label>保护面单上收、寄件人电话隐私，可向快递员免费索取</label>
								</td>
			
							</tr>
							<tr>
						    	<td>
						    		<label for="">代收货款</label></td>
								<td>
									<input type="text" id="" name="" value="">
								</td>
							</tr>
							<tr>
						    	<td colspan="2">
							    	<label>快递员代商家向收货方收取货款的服务(最高支持1万)</label>
								</td>
			
							</tr>
							
					    </table>
	            </div>
	            <div class="modal-footer">
	                <button type="submit" class="btn btn-primary">确定</button>
	            </div>
	           </form>
	        </div>
	    </div>
        </div>
<!-- 保价 end -->



<!-- 增值服务 -->
	    <div class="modal" id="myModalser" style="display:none;top:60px;">
	    	<div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">增值服务</h4>
	            </div>
	            <form action="" class="form-horizontal" role="form" id="" onsubmit="return check_form();">
	            <div class="modal-body">
			
						<table class="table ji_table" id="toXg">
						    <tr>
						    	<td>
						    		<label for="checkbox1">安全号码</label></td>
								<td>
									<input type="radio" id="" name="" value="">
								</td>
							</tr>
							<tr>
						    	<td colspan="2">
							    	<label>保护面单上收、寄件人电话隐私，可向快递员免费索取</label>
								</td>
			
							</tr>
							<tr>
						    	<td>
						    		<label for="">代收货款</label></td>
								<td>
									<input type="text" id="" name="" value="">
								</td>
							</tr>
							<tr>
						    	<td colspan="2">
							    	<label>快递员代商家向收货方收取货款的服务(最高支持1万)</label>
								</td>
			
							</tr>
							
					    </table>
	            </div>
	            <div class="modal-footer">
	                <button type="submit" class="btn btn-primary">确定</button>
	            </div>
	           </form>
	        </div>
	    </div>
        </div>
<!-- 增值服务 end -->

<!-- 对小哥说 -->

	    <div class="modal" id="myModalsay" style="display:none;top:60px;">

	    	<div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">对小哥说</h4>
	            </div>
	            <form action="" class="form-horizontal" role="form" id="">
	            <div class="modal-body">
			
						<table class="table ji_table" id="toXg">
						    <tr>
						    	<td>
						    		<!-- <div class="checkboxs"> -->
						    		 <input type="checkbox" id="checkbox1" name="explain" value="请带纸箱">
						    		 <label for="checkbox1">请带纸箱</label>
						    		 <!-- </div> -->
								</td>
								<td>
							    	<input type="checkbox" id="checkbox2" name="explain" value="需要爬楼"><label for="checkbox1">需要爬楼</label>
								</td>
								<td>
							    	<input type="checkbox" id="checkbox3" name="explain" value="缺文件袋"><label for="checkbox1">缺文件袋</label>
								</td>
							</tr>
							<tr>
						    	<td>
							    	<input type="checkbox" id="checkbox

							    	4" name="explain" value="来前电话"><label for="checkbox1">来前电话</label>
								</td>
								<td>
							    	<input type="checkbox" id="checkbox5" name="explain" value="请带面单"><label for="checkbox1">请带面单</label>
								</td>
								<td>
							    	<input type="checkbox" id="checkbox6" name="explain" value="请带胶带"><label for="checkbox1">请带胶带</label>
								</td>
							</tr>
							<tr>
						    	<td colspan="3">
							    	<div class="div-style">
										<textarea class="textarea-style" id="explain_content" name="explain_content"  placeholder="补充说明" maxlength="30"  onkeyup="setLength(this,30,'wordsLength');"></textarea>
							    	<span id="wordsLength" style="float:right;font-size:12px; color:#BDCADA;margin-right:5px;">0/200</span>
							    	</div>						    	
							    	
								</td>
								
							</tr>
							
					    </table>
	            </div>
	            <div class="modal-footer">
	                <button type="button" onClick="check_form();" class="btn btn-primary yes">确定</button>
	            </div>
	           </form>
	        </div>
	    </div>
    </div>

<!-- 对小哥说 end -->




    <!-- 快递协议 -->

	    <div class="modal" id="myModalagm" style="display:none;top:60px;">

	    	<div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel" style="color:#3B95FA;text-align:center;">《快递服务协议》</h4>
	            </div>
	            <form action="" class="form-horizontal" role="form" id="" onsubmit="check_form();">
	            <div class="modal-body">

					<p class="agm"><strong>特别提示:</strong></p>						
					<p class="agm"><strong>禁寄物品:&nbsp;</strong>寄件人<span class="ems">不得交寄各类具有爆炸性、易燃性、腐蚀性、毒害性、感染性以及放射性等可能危害寄递安全的物品、违法违规物品以及其他不予收寄物品</span></p>
					<p class="agm"><strong>禁寄物品:&nbsp;</strong>寄件人<span class="ems">不得交寄各类具有爆炸性、易燃性、腐蚀性、毒害性、感染性以及放射性等可能危害寄递安全的物品、违法违规物品以及其他不予收寄物品</span></p>
					<p class="agm"><strong>禁寄物品:&nbsp;</strong>寄件人<span class="ems">不得交寄各类具有爆炸性、易燃性、腐蚀性、毒害性、感染性以及放射性等可能危害寄递安全的物品、违法违规物品以及其他不予收寄物品</span></p>
						
	            </div>
	            <div class="modal-footer" style="text-align:center;">
	                <button type="submit" class="btn btn-primary" style="width:100%; background-color:#3B95FA;text-align:center;color:white;">同意本条款下次不再提醒</button>
	            </div>
	           </form>
	        </div>
	    </div>
    </div>
<!-- 快递协议 end -->





    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
  <script type="text/javascript"> 
	function change(){ 
	  var j_info = document.getElementById("j_info").value; 
	  var s_info = document.getElementById("s_info").value; 
	{ 
	   document.getElementById("s_info").value = j_info; 
	   document.getElementById("j_info").value = s_info; 
	  } 
	 } 

	 $("#j_info").on('click',function(e){
	 	window.location.href="./j_address.html";
	 })
	 $("#s_info").on('click',function(e){
	 	window.location.href="./s_address.html";
	 })



	 $("#goods").click(function(){
	  $('#myModalgoods').show();
	});
	 $("#price").click(function(){
	  $('#myModalprice').show();
	});
	 $("#ser").click(function(){
	  $('#myModalser').show();
	});

	 $("#say").click(function(){
	 	$('#myModalsay').show();
	});
	 $("#agm").click(function(){
	 	$('#myModalagm').show();
	});


	 /*全局遮罩层*/
        // var globalmodal = function (element, action) {

        //     var mod = $("#myModal");//全局遮罩层
        //     if (action == true) {
        //         /*打开遮罩层*/
        //         element.spinModal();
        //         mod.attr("style", "display:block");
        //     }
        //     else {
        //         /*关闭遮罩层*/
        //         element.spinModal(false);
        //         mod.attr("style", "display:none");
        //     }
        //     /*遮罩层样式及位置*/
        //     a = mod.height(element.height() + 10);//遮罩层高度
        //     mod.width(element.width());//设置遮罩层宽度
        //     mod.offset(element.offset());//根据遮罩对象来进行定位
        // }


        // 字数显示
        function setLength(obj,maxlength,id){
		    var num=maxlength-obj.value.length;
		    var leng=id;
		    if(num<0){
		        num=0;
		    }
		    document.getElementById(leng).innerHTML=num+"/200";
		}

		// 获取模态框表单中的值
		function check_form(){
			var chk_value =[];
		    $('input[name="explain"]:checked').each(function(){
		    	chk_value.push($(this).val());
		    	chk_value_str=chk_value.join(",");
		    });

		    var explain_content=document.getElementById('explain_content').value;
			var str = chk_value_str+","+explain_content;
			// var $("#say_content").val(str);
			// var a = $("#say_content").val();
            alert(str);
            // $("#myModalsay").modal("hide");
		};

	  
</script>
</html>
